const canvasElement = document.createElement('canvas');

canvasElement.width = window.innerWidth;
canvasElement.height = window.innerHeight;
canvasElement.style.backgroundColor = '#000';
document.body.appendChild(canvasElement);

const gl = canvasElement.getContext('webgl'); //3d 上下文对象

// 创建着色器对象
// 着色器源码
// 1、script分开的方式获取
// const vertexShaderSource = document.getElementById('vertext').innerText
// const fragmentShaderSource = document.getElementById('fragment').innerText

// 2、glsl程序代码
const vertexShaderSource = `
attribute vec2 a_position; // 顶点位置属性
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0); // 设置顶点位置
  gl_PointSize = 10.0; // 设置点的大小
}
`;

const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段的颜色
}`;

// 创建并编译着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建顶点着色器对象
gl.shaderSource(vertexShader, vertexShaderSource); //绑定着色器源码
gl.compileShader(vertexShader); //编译着色器源码



const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //创建片元着色器对象
gl.shaderSource(fragmentShader, fragmentShaderSource); //绑定着色器源码
gl.compileShader(fragmentShader); //编译着色器源码


// 创建并链接着色器程序
const program = gl.createProgram(); //创建程序对象
gl.attachShader(program, vertexShader); //附加编译好的着色器
gl.attachShader(program, fragmentShader); //附加编译好的着色器
gl.linkProgram(program); //链接程序对象
gl.useProgram(program); //指定的程序对象设置为当前的渲染状态
gl.drawArrays(gl.POINTS, 0, 3) //绘制图元


